<!--
 * @Author: guandeshen 295570679@qq.com
 * @Date: 2024-08-25 09:54:45
 * @LastEditors: 关德参 2257609862@qq.com
 * @LastEditTime: 2024-09-15 16:46:52
 * @FilePath: /task-admin/src/views/task/components/LossRemarks/index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by RSC, All Rights Reserved. 
-->
<template>
  <div class="content">
    <!-- 添加人员 -->
    <div class="table-box">
      <el-table
        :data="newData"
        :stripe="true"
        :header-cell-style="{
          'background-color': '#F6F7F9',
          color: '#8B8B99',
        }"
        style="width: 100%"
      >
        <el-table-column
          :label="$t('common.amount')"
          :show-overflow-tooltip="true"
          :min-width="150"
        >
          <template #default="scope">
            <span v-if="scope.row.ref">{{ scope.row.amount }}</span>
            <el-input v-else v-model="scope.row.amount" />
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.remark')"
          :show-overflow-tooltip="true"
          :min-width="360"
        >
          <template #default="scope">
            <span v-if="scope.row.ref">{{ scope.row.remark }}</span>
            <el-input v-else v-model="scope.row.remark" />
          </template>
        </el-table-column>
        <el-table-column
          v-if="viewType != 1"
          :label="$t('common.operation')"
          :width="120"
        >
          <template #default="{ $index, row }">
            <el-button
              :disabled="row.id == '-1' ? false : true"
              type="danger"
              icon="delete"
              link
              @click="handleDeleteClick($index, row.id)"
            >
              {{ $t("common.delete") }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span
      v-if="viewType != 1"
      class="flex-center h-42px border-rd-8px bg-#F2F3F5 text-[#323233] font-900 text-14px cursor-pointer mt-16px hover:bg-#4E6BEF hover:text-[#fff]"
      @click="handleAddClick"
      ><i-ep-plus class="close-icon mr-10px font-900" size="12px" />{{
        $t("common.add")
      }}</span
    >
  </div>
</template>

<script lang="ts" setup>
import { watchEffect } from "vue";
import { LossList } from "@/api/task/model";
import ProjectAPI from "@/api/project";
const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    data: LossList[] | undefined;
    viewType: number;
    wbsId: string;
  }>(),
  {
    data: () => {
      return [];
    },
    viewType: 2,
  }
);
const newData = ref<LossList[]>([]);
watchEffect(() => {
  newData.value = props.data;
  // 这里可以执行更多响应式的副作用代码
});

// 点击删除
const handleDeleteClick = (index: number, id: string) => {
  if (id == "-1") {
    newData.value.splice(index, 1);
  } else {
    ElMessageBox.confirm(t("common.confirmDeletion"), t("common.warning"), {
      confirmButtonText: t("common.confirm"),
      cancelButtonText: t("common.cancel"),
      type: "warning",
    }).then(function () {
      ProjectAPI.deleteUserByIds({
        wbs_id: props.wbsId,
        wbs_user_id: id,
      }).then(() => {
        ElMessage.success(t("common.deleteSuccessful"));
        newData.value.splice(index, 1);
      });
    });
  }
};

// const siteRef = ref<InstanceType<typeof PageContent>>();
const addRow = ref<LossList>({
  id: "-1",
  ref: "",
  remark: "",
  amount: 0,
});

const handleAddClick = () => {
  // 点添加的时候判断当前有没有新增的行，如果有判断是否全部已经填写，没有就提示，有就把ref给个随机值，然后增加一条数据
  if (newData.value.some((item) => item.ref === "")) {
    ElMessage.error(t("common.pleaseFillFirst"));
    return;
  }
  if (newData.value.length > 0) {
    newData.value[newData.value.length - 1].ref = Math.random().toString(36);
  }

  newData.value.push(JSON.parse(JSON.stringify(addRow.value)));
};

defineExpose({ newData });
</script>

<style scoped>
/* @import url(); 引入公共css类 */
:deep(.table-box) {
  padding: 0 !important;
  margin-top: 0 !important;
}
</style>
